<template>
  <a-card title="称重计量接口">

  <a-form ref="formRef" :model="formState" layout="vertical" :rules="RULES">
    <a-row :gutter="12">
      <a-col :span="8">
        <a-form-item label="编号" field="code">
          <a-input v-model="formState.code" allow-clear placeholder="请填写编号" :disabled="isUpdate"/>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="日期" field="date">
          <a-date-picker style="width: 100%" v-model="formState.date" allow-clear placeholder="请填写日期"/>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="录入时间" field="time">
          <a-date-picker style="width: 100%" showTime v-model="formState.time" allow-clear
                         placeholder="请填写录入时间"/>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="皮重" field="tareWeight">
          <a-input-number v-model="formState.tareWeight" :min="0" :step="0.10" mode="embed" placeholder="请填写皮重">
            <template #suffix>
              吨&nbsp;&nbsp;&nbsp;&nbsp;
            </template>
          </a-input-number>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="毛重" field="grossWeight">
          <a-input-number v-model="formState.grossWeight" :min="0" :step="0.10" mode="embed" placeholder="请填写毛重">
            <template #suffix>
              吨&nbsp;&nbsp;&nbsp;&nbsp;
            </template>
          </a-input-number>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="净重" field="netWeight">
          <a-input-number v-model="formState.netWeight" :min="0" :step="0.10" mode="embed" placeholder="请填写净重">
            <template #suffix>
              吨&nbsp;&nbsp;&nbsp;&nbsp;
            </template>
          </a-input-number>
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="单价" field="unitPrice">
          <a-input-number v-model="formState.unitPrice" :min="0" :step="0.10" mode="embed" placeholder="请填写单价">
            <template #suffix>
              元&nbsp;&nbsp;&nbsp;&nbsp;
            </template>
          </a-input-number>
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="金额" field="amount">
          <a-input-number v-model="formState.amount" :min="0" :step="0.10" mode="embed" placeholder="请填写金额">
            <template #suffix>
              元&nbsp;&nbsp;&nbsp;&nbsp;
            </template>
          </a-input-number>
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="车牌号" field="carCards">
          <a-input v-model="formState.carCards" allow-clear @input="value => {formState.carCards = value.toUpperCase()}"
                   placeholder="请填写车牌号"/>
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="发布时间" field="releaseTime">
          <a-date-picker style="width: 100%" showTime v-model="formState.releaseTime" allow-clear
                         placeholder="请填写发布时间"/>
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="有效日期" field="effectiveDate">
          <a-date-picker style="width: 100%" v-model="formState.effectiveDate" allow-clear
                         placeholder="请填写有效日期"/>
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="签收人" field="signed">
          <a-input v-model="formState.signed" allow-clear placeholder="请填写签收人"/>
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item label="备注" field="remarks">
          <a-textarea v-model="formState.remarks" :auto-size="{minRows:2,maxRows:5}"></a-textarea>
        </a-form-item>
      </a-col>


      <a-col>
        <div style="width: 100%; text-align: right; margin-top: 20px">
          <a-button type="primary" @click="onsubmit"> 提交单据</a-button>

        </div>
      </a-col>
    </a-row>
  </a-form>

  </a-card>
</template>

<script setup>
import {reactive, ref} from 'vue';
import {Modal} from '@arco-design/web-vue'
import {AddChefAjax} from "@/util/AjaxUtil.js";
import FormRuleUtil from "@/util/FormRuleUtil.js";

const formRef = ref(null)

const RULES = {
  code: FormRuleUtil.strRule("编号", true, 30,),
  date: FormRuleUtil.strRule("日期", true, 30),
  time: FormRuleUtil.strRule("录入时间", true, 30),
  tareWeight: FormRuleUtil.numRule("皮重", true, 0, 1000000),
  grossWeight: FormRuleUtil.numRule("毛重", true, 0, 1000000),
  netWeight: FormRuleUtil.numRule("净重", true, 0, 1000000),
  unitPrice: FormRuleUtil.numRule("单价", true, 0, 1000000),
  amount: FormRuleUtil.numRule("金额", true, 0, 1000000),
  carCards: FormRuleUtil.strRule("车牌号", true, 30, "car"),
  releaseTime: FormRuleUtil.strRule("发布时间", true, 30),
  effectiveDate: FormRuleUtil.strRule("有效日期", true, 30),
  signed: FormRuleUtil.strRule("签收人", true, 30),
  remarks: FormRuleUtil.strRule("备注", true, 500),
}

let formState = reactive({

  code: "",
  date: "",
  time: "",
  tareWeight: 0,
  grossWeight: 0,
  netWeight: 0,
  unitPrice: 0,
  amount: 0,
  carCards: null,
  releaseTime: null,
  effectiveDate: null,
  signed: null,
  remarks: null
})


const onsubmit = async () => {
  const x = await formRef.value.validate()
  if (x !== undefined) return


  const tips = "确定要提交这个称重计量单吗？"
  const handler = async () => {
    const data = await AddChefAjax(formState)
    console.log(data)
    setTimeout(()=>{
      location.reload()
    },1000)
  }

  Modal.confirm({
    title: '操作提示',
    content: tips,
    okText: '确定提交',
    onOk: () => handler()

  })
}

</script>
